<template>
  <el-form
    label-position="left"
    label-width="80px"
    :model="cate"
    ref="cateAddRef"
    style="width: 100%"
    :rule="rules"
  >
    <el-form-item label="分类名字" prop="cateName">
      <el-input v-model="cate.cateName" placeholder="请输入分类名字" />
    </el-form-item>
    <el-form-item label="排序" prop="order">
      <el-input-number :min="0" v-model="cate.order" />
    </el-form-item>
    <el-form-item label="状态" prop="cateStatus">
      <el-switch
        v-model="cate.cateStatus"
        :active-value="0"
        :inactive-value="1"
        active-text="启用"
        inactive-text="禁用"
        inline-prompt
      />
    </el-form-item>
    <el-form-item label="分类图标">
      <el-upload
        action="/api/upload"
        :show-file-list="false"
        :on-success="handleUploadSuccess"
        :before-upload="beforeUpload"
      >
        <el-button type="primary">点击上传</el-button>
        <template #tip>
          <div class="el-upload__tip">jpg/png 体积不超过 500KB.</div>
        </template>
      </el-upload>
      <img :src="cate.cateIcon" width="100" alt="" />
    </el-form-item>
    <el-form-item label="父级分类" prop="pid">
      <el-tree-select
        v-model="cate.pid"
        check-strictly
        :data="cates"
        :props="{
          label: 'cateName',
          value: 'id',
        }"
        :render-after-expand="false"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button type="danger" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { Cate } from "@t/cate";
import { getCates, updateCate, getCateDetail } from "@a/cate";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

// 接收props
const props = defineProps<{
  cateId: number;
}>();

// 监听 修改商品分类id的变化 获取修改商品分类的详情
// 获取商品详情
const getCate = () => {
  getCateDetail(props.cateId).then((res: any) => {
    if (res.code === 200) {
      cate.value = res.data;
    }
  });
};
watch(
  () => props.cateId,
  () => {
    getCate();
  },
  {
    immediate: true,
  }
);

const router = useRouter();
// 新增商品分类数据
const cate = ref<Cate>({
  cateName: "",
  cateIcon: "",
  order: 0,
  pid: -1, // -1代表顶层分类
  cateStatus: 0, // 0启用1 禁用
});
const cateAddRef = ref<any>(null);
// 表单校验规则
const rules = {
  cateName: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
};

// 提交表单新增分类
const submit = () => {
  cateAddRef.value
    .validate()
    .then(() => {
      // 提交表单新增分类
      updateCate(cate.value).then((res: any) => {
        if (res.code === 200) {
          ElMessage({
            type: "success",
            message: res.msg,
            onClose: () => {
              router.go(0);
            },
          });
        } else {
          ElMessage.error("新增失败");
        }
      });
    })
    .catch(() => {
      ElMessage.error("字段校验不通过过");
    });
};
const reset = () => {
  cateAddRef.value.resetFields();
};
// 获取所有分类 作为 树形 下拉 选项 （作为父级分类选项）
const cates = ref<Cate[]>();
const fetchCates = () => {
  getCates().then((res: any) => {
    if (res.code === 200) {
      cates.value = [
        {
          id: -1,
          cateName: "顶层分类",
        },
        ...res.data,
      ];
    }
  });
};

// 分类图标上传
const handleUploadSuccess = (res: any) => {
  if (res.code === 200) {
    cate.value.cateIcon = res.data.url;
  }
};
// 限制上传体积
const beforeUpload = (file: any) => {
  if (file.size > 1024 * 500) {
    console.log(1);

    ElMessage.error("上传图片大小不能超过500kb");

    return false;
  } else {
    return true;
  }
};
onMounted(() => {
  fetchCates();
});
</script>

<style scoped></style>
